<!DOCTYPE html>
<html lang="zh-CN">
    <head>
  <!-- 元数据 -->
  <meta charset="utf-8">
  
  
  <title>浏览器渲染原理 | 月蝉の小窝</title>
  
  <meta name="author" content="月蝉" />
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="robots" content="index,follow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <meta name="format-detection" content="telphone=no, email=no" />
  
    <meta name="keywords" content="Chrome, 原理" />
  
  <meta name="description" content="什么是渲染(render)?将html字符串解析成屏幕对应的像素信息 浏览器是如何渲染页面的？当浏览器的网络线程收到HTML文档后，会产生一个渲染任务，并将其传递欸渲染主线程的消息队列。 在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。 整个渲染流程分为多个阶段，分别是：HTML解析、样式计算器、布局、分层、绘制、分块、光栅化、画每个阶段都有明确的输入输出，上一个阶段的输">
<meta property="og:type" content="article">
<meta property="og:title" content="浏览器渲染原理">
<meta property="og:url" content="https://moon-cicada.gitee.io/blog/2023/10/29/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E5%8E%9F%E7%90%86/index.html">
<meta property="og:site_name" content="月蝉の小窝">
<meta property="og:description" content="什么是渲染(render)?将html字符串解析成屏幕对应的像素信息 浏览器是如何渲染页面的？当浏览器的网络线程收到HTML文档后，会产生一个渲染任务，并将其传递欸渲染主线程的消息队列。 在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。 整个渲染流程分为多个阶段，分别是：HTML解析、样式计算器、布局、分层、绘制、分块、光栅化、画每个阶段都有明确的输入输出，上一个阶段的输">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/29.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/30.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/31.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/32.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/8.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/9.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/10.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/11.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/12.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/13.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/14.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/15.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/16.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/17.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/18.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/19.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/20.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/21.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/22.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/23.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/24.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/25.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/26.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/27.png">
<meta property="og:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/28.png">
<meta property="article:published_time" content="2023-10-29T12:23:30.000Z">
<meta property="article:modified_time" content="2023-10-29T04:45:29.694Z">
<meta property="article:author" content="月蝉">
<meta property="article:tag" content="原理">
<meta property="article:tag" content="Chrome">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://moon-cicada.gitee.io/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/29.png">
  
  <!-- 站点验证相关 -->
  
    
    
    
  
  <!-- 样式表文件 -->
  <link rel="stylesheet" id="kratos-css" href="/blog/css/kratosr.min.css" media="all"></script>
  
    <link rel="stylesheet" id="darkmode-css" href="/blog/css/kr-color-dark.min.css" media="(prefers-color-scheme: dark)"></script>
    <script src="/blog/js/kr-dark.min.js"></script>
  
  
    <link rel="stylesheet" id="highlight-css" href="/blog/css/highlight/night-eighties.min.css" media="all"></script>
  
  <link rel="stylesheet" id="fontawe-css" href="/blog/vendors/font-awesome@4.7.0/css/font-awesome.min.css" media="all"></script>
  <link rel="stylesheet" id="nprogress-css" href="/blog/vendors/nprogress@0.2.0/nprogress.css" media="all"></script>
  
  
    <link rel="stylesheet" href="/blog/vendors/aplayer@1.10.1/dist/APlayer.min.css"></script>
  
  
    <link rel="stylesheet" href="/blog/vendors/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"></script>
  
  <!-- 不得不预先加载的一些JS文件 -->
  <script src="/blog/vendors/jquery@3.6.0/dist/jquery.min.js"></script>
  
    <script src="/blog/vendors/qrcode_js@1.0.0/qrcode.min.js"></script>
  
  
  <style>
    
    
  </style>
  
<meta name="generator" content="Hexo 6.3.0"></head>


    <body class="custom-background">
        <div id="kratos-wrapper">
    <div id="kratos-page">
        <div id="kratos-header">
            <header id="kratos-desktop-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="nav-header">
                        <nav id="kratos-menu-wrap">
                            <ul id="kratos-primary-menu" class="sf-menu">
                                
                                    
                                    
                                        
                                            <li><a href="/blog/"><i class="fa fa-home"></i>首页</a></li>
                                        
                                    
                                        
                                            <li><a href="/blog/archives/"><i class="fa fa-file"></i>档案馆</a></li>
                                        
                                    
                                        
                                            <li><a href="/blog/about/"><i class="fa fa-paper-plane"></i>关于我</a></li>
                                        
                                    
                                
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>
            <header id="kratos-mobile-topnav" class="kratos-topnav">
                <div class="container">
                    <div class="color-logo"><a href="/blog/">月蝉の小窝</a></div>
                    <div class="nav-toggle">
                        <a class="kratos-nav-toggle js-kratos-nav-toggle">
                            <i></i>
                        </a>
                    </div>
                </div>
            </header>
        </div>
        <div class="kratos-start kratos-hero-2">
            <!-- <div class="kratos-overlay"></div> -->
            <div class="kratos-cover kratos-cover-2 text-center">
                <div class="desc desc2 animate-box">
                    <a href="/blog/">
                        <h2>月蝉の小窝</h2> <br />
                        <span></span>
                    </a>
                </div>
            </div>
        </div>

        <div id="kratos-blog-post">
            <div class="container">
                <div id="main" class="row">
                    

        

            <section class="col-md-8">

        

            <article itemscope itemtype="https://schema.org/Article">
    
    <link itemprop="mainEntityOfPage" href="https://moon-cicada.gitee.io/blog/2023/10/29/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E5%8E%9F%E7%90%86/">
    <div class="kratos-hentry kratos-post-inner clearfix">
        <header class="kratos-entry-header">
            
                <h1 class="kratos-entry-title text-center" itemprop="name headline">浏览器渲染原理</h1>
            
            
            <ul class="kratos-post-meta text-center">
                <li><time datetime="2023-10-29T12:23:30.000Z" itemprop="datePublished"><i class="fa fa-calendar"></i> 2023-10-29</time></li>
                <li itemprop="author" itemscope itemtype="https://schema.org/Person">
                    <i class="fa fa-user"></i> 作者 <span itemprop="name">月蝉</span>
                </li>
                
                    <li>
                        <i class="fa fa-edit"></i> 
                        
                        
                            ~2.63K
                        
                        字
                    </li>
                
                
                    <li id="/blog/2023/10/29/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E5%8E%9F%E7%90%86/" class="leancloud_visitors" data-flag-title="浏览器渲染原理">
                        <i class="fa fa-eye"></i>
                        <span class="leancloud-visitors-count"> </span> 次阅读
                    </li>
                
            </ul>
        </header>
        <div class="kratos-post-content">
            
            <div id="expire-alert" class="alert alert-warning hidden" role="alert">
                <div class="icon"><i class="fa fa-warning"></i></div>
                <div class="text"><p>本文最后编辑于 <time datetime="1698554729694"></time> 前，其中的内容可能需要更新。</p></div>
            </div>
            
            
            
                <div class="kratos-post-inner-toc toc-div-class" >
                    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E6%B8%B2%E6%9F%93-render"><span class="toc-number">1.</span> <span class="toc-text">什么是渲染(render)?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E6%98%AF%E5%A6%82%E4%BD%95%E6%B8%B2%E6%9F%93%E9%A1%B5%E9%9D%A2%E7%9A%84%EF%BC%9F"><span class="toc-number">2.</span> <span class="toc-text">浏览器是如何渲染页面的？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFreflow%EF%BC%9F"><span class="toc-number">3.</span> <span class="toc-text">什么是reflow？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFrepaint%EF%BC%9F"><span class="toc-number">4.</span> <span class="toc-text">什么是repaint？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88transform%E7%9A%84%E6%95%88%E7%8E%87%E9%AB%98%EF%BC%9F"><span class="toc-number">5.</span> <span class="toc-text">为什么transform的效率高？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%BE%E7%A4%BA"><span class="toc-number">6.</span> <span class="toc-text">图示</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%B2%E6%9F%93%E6%97%B6%E9%97%B4%E7%82%B9"><span class="toc-number">6.1.</span> <span class="toc-text">渲染时间点 </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%B2%E6%9F%93%E6%B5%81%E6%B0%B4%E7%BA%BF"><span class="toc-number">6.2.</span> <span class="toc-text">渲染流水线 </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E8%A7%A3%E6%9E%90HTML-Parse-HTML"><span class="toc-number">6.3.</span> <span class="toc-text">1. 解析HTML - Parse HTML </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E6%A0%B7%E5%BC%8F%E8%AE%A1%E7%AE%97-Recalculate-Style"><span class="toc-number">6.4.</span> <span class="toc-text">2. 样式计算-Recalculate Style </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%B8%83%E5%B1%80-Layout"><span class="toc-number">6.5.</span> <span class="toc-text">3. 布局 - Layout </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%88%86%E5%B1%82-Layer"><span class="toc-number">6.6.</span> <span class="toc-text">4. 分层-Layer </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E7%BB%98%E5%88%B6-Paint"><span class="toc-number">6.7.</span> <span class="toc-text">5. 绘制 - Paint </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-%E5%88%86%E5%9D%97-Tiling"><span class="toc-number">6.8.</span> <span class="toc-text">6. 分块 - Tiling </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-%E5%85%89%E6%A0%85%E5%8C%96-Raster"><span class="toc-number">6.9.</span> <span class="toc-text">7.  光栅化 - Raster </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-%E7%94%BB-Draw"><span class="toc-number">6.10.</span> <span class="toc-text">8.  画 - Draw </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%8C%E6%95%B4%E8%BF%87%E7%A8%8B"><span class="toc-number">6.11.</span> <span class="toc-text">完整过程 </span></a></li></ol></li></ol>
                </div>
            
            <hr />
            <div itemprop="articleBody"><h2 id="什么是渲染-render"><a href="#什么是渲染-render" class="headerlink" title="什么是渲染(render)?"></a>什么是渲染(render)?</h2><p>将html字符串解析成屏幕对应的像素信息</p>
<h2 id="浏览器是如何渲染页面的？"><a href="#浏览器是如何渲染页面的？" class="headerlink" title="浏览器是如何渲染页面的？"></a>浏览器是如何渲染页面的？</h2><p>当浏览器的网络线程收到HTML文档后，会产生一个渲染任务，并将其传递欸渲染主线程的消息队列。 <br /><br>在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。 <br /><br>整个渲染流程分为多个阶段，分别是：HTML解析、样式计算器、布局、分层、绘制、分块、光栅化、画每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。<br>这样，整个渲染流程就形成了一套组织严密的生产流水线。 <br /></p>
<p>渲染的第一步是解析HTML。 <br /><br>解析过程中遇到CSS解析CSS，遇到JS执行JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载HTML中的外部CSS文件和外部JS文件。 <br /><br>如果主线程解析到link位置，此时外部的CSS文件还没有下载解析好，主线程不会等待，继续解析后续的HTML。这是因为下载和解析CSS的工作是在预解析线程中进行的。这就是CSS不会阻塞HTML解析的根本原因。 <br /><br>如果主线程解析到script位置，会停止解析HTML，转而等待JS文件下载好，并将全局代码解析执行完成后，才能继续解析HTML。这是因为JS代码的执行过程可能会修改当前DOM树，所以DOM树的生成必须暂停。这就是JS会阻塞HTML解析的根本原因。 <br /><br>第一步完成后，会得到DOM树和CSSOM树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在CSSOM树中。 <br /></p>
<p>渲染的下一步是样式计算。<br /><br>主线程会遍历得到的DOM树，依次为树中的每个节点计算出它最终的样式，称之为Computed Style。<br /><br>在这一过程中，很多预设值会变成绝对值，比如red会变成rgb(255,0,0)；相对单位会变成绝对单位，比如em会变成px。<br /><br>这一步完成之后，会得到一颗带有样式的DON树。<br /></p>
<p>接下来是布局，布局完成后会得到布局树。<br /><br>布局阶段会依次遍历DOM树的每一个节点，计算每个节点的几何信息。例如节点的宽高、相对包含块的位置。<br /><br>大部分时候，DOM树和布局树并非一一对应。<br /><br>比如display:none的节点没有几何信息，因此不会生成到布局树；又比如适用了伪元素选择器，虽然DOM树中不存在这些伪元素节点，但它们拥有几何信息，所以会生成到布局树中。还有匿名行盒、匿名块盒等等都会导致DOM树和布局树无法一一对应。<br /></p>
<p>下一步是分层。<br /><br>主线程会使用一套复杂的策略对整个布局树中进行分层。<br /><br>分层的好处在于，将来某一个层改变后，仅会对该层进行后续处理，从而提升效率。<br /><br>滚动条、堆叠上下文、transform、opacity等样式都会或多或少的影响分层结果，也可以通过will-change属性更大程度的影响分层结果。<br /></p>
<p>再下一步是绘制。<br /><br>主线程会为每个层单独产生绘制指令集，用于描述这一层的内容该如何画出来。<br /></p>
<p>完成绘制后，主线程将每个图层的绘制信息提交给合成线程，剩余工作将由合成线程完成。<br /><br>合成线程首先对每个图层进行分块，将其划分为更多的小区域。<br /><br>它会从线程池中拿去多个线程来完成分块工作。<br /></p>
<p>分块完成后，进入光栅化阶段。<br /><br>合成线程会将块信息交给GPU进程，以极高的速度完成光栅化。<br /><br>GPU进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块。<br /><br>光栅化的结果，就是一块一块的位图。<br /></p>
<p>最后一个阶段就是画了。<br /><br>合成线程拿到每个层、每个块的位图后，生成一个个[指引(quad)]信息。<br /><br>指引会标识处每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。<br /><br>变形发生在合成线程，与渲染主线程无关，这就是transform效率高的本质原因。<br /><br>合成线程会把quad提交给GPU进程，由GPU进程产生系统调用，提交给GPU硬件，完成最终的屏幕成像。<br /></p>
<h2 id="什么是reflow？"><a href="#什么是reflow？" class="headerlink" title="什么是reflow？"></a>什么是reflow？</h2><p>reflow的本质就是重新计算layout树。<br /><br>当进行了会影响布局树的操作后，需要重新计算布局树，会引发layout。<br /><br>为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当JS代码全部完成后再进行同意计算。所以，改动属性造成的reflow是异步完成的。<br /><br>也同样因为如此，当JS获取布局属性时，就可能造成无法获取到最新的布局信息。<br /><br>浏览器再反复权衡下，最终决定获取属性立即reflow。<br /><br><img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/29.png" alt="Alt text"> <br /></p>
<h2 id="什么是repaint？"><a href="#什么是repaint？" class="headerlink" title="什么是repaint？"></a>什么是repaint？</h2><p>repaint的本质就是重新根据分层信息计算了绘制指令。<br /><br>当改动了可见样式后，就需要重新计算，会引发repaint。<br /><br>由于元素的布局信息也属于可见样式，所以reflow一定会引起repaint。<br /><br><img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/30.png" alt="Alt text"> <br /></p>
<h2 id="为什么transform的效率高？"><a href="#为什么transform的效率高？" class="headerlink" title="为什么transform的效率高？"></a>为什么transform的效率高？</h2><p>因为transform既不会影响布局也不会影响绘制指令，它影响的只是渲染流程的最后一个[draw]阶段。<br /><br>由于draw阶段在合成线程中，所以transform的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌，也不会影响transform的变化。<br /><br><img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/31.png" alt="Alt text"> <br /><br><img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/32.png" alt="Alt text"> <br /></p>
<h2 id="图示"><a href="#图示" class="headerlink" title="图示"></a>图示</h2><h3 id="渲染时间点"><a href="#渲染时间点" class="headerlink" title="渲染时间点 "></a>渲染时间点 <br /></h3><p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/8.png" alt="Alt text"> <br /></p>
<h3 id="渲染流水线"><a href="#渲染流水线" class="headerlink" title="渲染流水线 "></a>渲染流水线 <br /></h3><p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/9.png" alt="Alt text"> <br /></p>
<h3 id="1-解析HTML-Parse-HTML"><a href="#1-解析HTML-Parse-HTML" class="headerlink" title="1. 解析HTML - Parse HTML "></a>1. 解析HTML - Parse HTML <br /></h3><p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/10.png" alt="Alt text"> <br /></p>
<blockquote>
<p>Document Object Model <br /></p>
</blockquote>
<p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/11.png" alt="Alt text"> <br /></p>
<blockquote>
<p>CSS Object Model <br /></p>
</blockquote>
<p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/12.png" alt="Alt text"> <br /></p>
<blockquote>
<p>HTML解析过程中遇到CSS代码怎么办？ <br /><br>为了提高解析效率，浏览器会启动一个预解析器率先下载和解析CSS <br /></p>
</blockquote>
<p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/13.png" alt="Alt text"> <br /></p>
<blockquote>
<p>HTML解析过程中遇到JS代码怎么办？ <br /><br>渲染主线程遇到JS时必须暂停一切行为，等待下载执行完成后才能继续<br /><br>预解析线程可以分担一点下载JS的任务 <br /></p>
</blockquote>
<p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/14.png" alt="Alt text"> <br /></p>
<h3 id="2-样式计算-Recalculate-Style"><a href="#2-样式计算-Recalculate-Style" class="headerlink" title="2. 样式计算-Recalculate Style "></a>2. 样式计算-Recalculate Style <br /></h3><p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/15.png" alt="Alt text"> <br /></p>
<h3 id="3-布局-Layout"><a href="#3-布局-Layout" class="headerlink" title="3. 布局 - Layout "></a>3. 布局 - Layout <br /></h3><p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/16.png" alt="Alt text"> <br /></p>
<blockquote>
<p>DOM树和Layout树不一定是一一对应的 <br /></p>
</blockquote>
<p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/17.png" alt="Alt text"> <br /><br>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/18.png" alt="Alt text"> <br /><br>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/19.png" alt="Alt text"> <br /></p>
<h3 id="4-分层-Layer"><a href="#4-分层-Layer" class="headerlink" title="4. 分层-Layer "></a>4. 分层-Layer <br /></h3><p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/20.png" alt="Alt text"> <br /></p>
<h3 id="5-绘制-Paint"><a href="#5-绘制-Paint" class="headerlink" title="5. 绘制 - Paint "></a>5. 绘制 - Paint <br /></h3><blockquote>
<p>这里的绘制，是为每一层生成如何绘制的指令 <br /></p>
</blockquote>
<p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/21.png" alt="Alt text"> <br /></p>
<blockquote>
<p>渲染主线程的工作到此为止，剩余步骤交给其他线程完成 <br /></p>
</blockquote>
<p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/22.png" alt="Alt text"> <br /></p>
<h3 id="6-分块-Tiling"><a href="#6-分块-Tiling" class="headerlink" title="6. 分块 - Tiling "></a>6. 分块 - Tiling <br /></h3><blockquote>
<p>分块会将每一层分为多个小的区域 <br /></p>
</blockquote>
<p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/23.png" alt="Alt text"> <br /></p>
<blockquote>
<p>分块的工作是交给多个线程同时进行的 <br /></p>
</blockquote>
<p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/24.png" alt="Alt text"> <br /></p>
<h3 id="7-光栅化-Raster"><a href="#7-光栅化-Raster" class="headerlink" title="7.  光栅化 - Raster "></a>7.  光栅化 - Raster <br /></h3><blockquote>
<p>光栅化是将每个块变成位图 <br /><br>优先处理靠近视口的块 <br /></p>
</blockquote>
<p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/25.png" alt="Alt text"> <br /></p>
<blockquote>
<p>此过程会用到GPU加速 <br /></p>
</blockquote>
<p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/26.png" alt="Alt text"> <br /></p>
<h3 id="8-画-Draw"><a href="#8-画-Draw" class="headerlink" title="8.  画 - Draw "></a>8.  画 - Draw <br /></h3><blockquote>
<p>合成线程计算出每个位图在屏幕上的位置，交给GPU进行最终呈现 <br /></p>
</blockquote>
<p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/27.png" alt="Alt text"> <br /></p>
<h3 id="完整过程"><a href="#完整过程" class="headerlink" title="完整过程 "></a>完整过程 <br /></h3><p>   <img src="/blog/images/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/images/28.png" alt="Alt text"> <br />
    </p>
</div>
        </div>
        
            <div class="kratos-copyright text-center clearfix">
                <h5 itemprop="copyrightNotice">本作品采用 <a rel="license nofollow" target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/">知识共享署名-相同方式共享 4.0 国际许可协议</a> 进行许可</h5>
            </div>
        
        <footer class="kratos-entry-footer clearfix">
            
                <div class="post-like-donate text-center clearfix" id="post-like-donate">
                
                
                    <a class="share" href="javascript:;"><i class="fa fa-share-alt"></i> 分享</a>
                    <div class="share-wrap" style="display: none;">
    <div class="share-group">
        <a href="javascript:;" class="share-plain qq" onclick="share('qq');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-qq"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain qzone" onclick="share('qzone');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-star"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weixin pop style-plain" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weixin"></i>
            </div>
            <div class="share-int">
                <div class="qrcode" id="wechat-qr"></div>
                <p>打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮</p>
            </div>
        </a>
        <a href="javascript:;" class="share-plain weibo" onclick="share('weibo');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-weibo"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain facebook style-plain" onclick="share('facebook');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-facebook"></i>
            </div>
        </a>
        <a href="javascript:;" class="share-plain twitter style-plain" onclick="share('twitter');" rel="nofollow">
            <div class="icon-wrap">
                <i class="fa fa-twitter"></i>
            </div>
        </a>
    </div>
    <script type="text/javascript">
        $(()=>{
            new QRCode("wechat-qr", {
                text: "https://moon-cicada.gitee.io/blog/2023/10/29/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E5%8E%9F%E7%90%86/",
                width: 150,
                height: 150,
                correctLevel : QRCode.CorrectLevel.H
            });
        });
        function share(dest) {
            const qqBase        = "https://connect.qq.com/widget/shareqq/index.html?";
            const weiboBase     = "https://service.weibo.com/share/share.php?";
            const qzoneBase     = "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?";
            const facebookBase  = "https://www.facebook.com/sharer/sharer.php?";
            const twitterBase   = "https://twitter.com/intent/tweet?";
            const hostUrl       = "https://moon-cicada.gitee.io/blog/2023/10/29/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E5%8E%9F%E7%90%86/";
            const title         = "「浏览器渲染原理」";
            const excerpt       = `什么是渲染(render)?将html字符串解析成屏幕对应的像素信息
浏览器是如何渲染页面的？当浏览器的网络线程收到HTML文档后，会产生一个渲染任务，并将其传递欸渲染主线程的消息队列。 在事件循环机制的作用下，渲染主线程取出消息队列...`;
            let _URL;
            switch (dest) {
                case "qq"       : _URL = qqBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";     break;
                case "weibo"    : _URL = weiboBase+"url="+hostUrl+"&title="+title+excerpt;                                 break;
                case "qzone"    : _URL = qzoneBase+"url="+hostUrl+"&title="+title+"&desc=&summary="+excerpt+"&site=cxpy";  break;
                case "facebook" : _URL = facebookBase+"u="+hostUrl;                                                        break;
                case "twitter"  : _URL = twitterBase+"text="+title+excerpt+"&url="+hostUrl;                                break;
            }
            window.open(_URL);
        };
    </script>
</div>
                
                </div>
            
            <div class="footer-tag clearfix">
                <div class="pull-left">
                <i class="fa fa-tags"></i>
                    <a class="tag-none-link" href="/blog/tags/Chrome/" rel="tag">Chrome</a>, <a class="tag-none-link" href="/blog/tags/%E5%8E%9F%E7%90%86/" rel="tag">原理</a>
                </div>
                <div class="pull-date">
                    <time datetime="2023-10-29T04:45:29.694Z" itemprop="dateModified">最后编辑：2023-10-29</time>
                </div>
            </div>
        </footer>
    </div>
    
        <nav class="navigation post-navigation clearfix" role="navigation">
            
            <div class="nav-previous clearfix">
                <a title=" 事件循环" href="/blog/2023/10/29/浏览器原理/事件循环/">&lt; 上一篇</a>
            </div>
            
            
            <div class="nav-next clearfix">
                <a title=" html基础" href="/blog/2023/10/31/HTML/html基础/">下一篇 &gt;</a>
            </div>
            
        </nav>
    
    
        <div id="v-comments" class="post-comments"></div>
<script>
    var load_comm = () => {
        const init = () => {
            new Valine({
                el: '#v-comments',
                appId: 'cM5eOxMg63PZfmD94zakD07F-gzGzoHsz',
                appKey: 'Ig7h0RQDY2duLi5iYpxbM1ZW',
                visitor: true,
                enableQQ: true,
                path: '/blog/2023/10/29/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E5%8E%9F%E7%90%86/'
            });
        }
        if (typeof Valine === 'undefined') {
            const src = '/blog/vendors/valine@1.4.18/dist/Valine.min.js';
            $.getScript(src, init);
        } else {
            init();
        }
    };
</script>
<noscript>Please enable JavaScript to view the <a target="_blank" rel="noopener" href="https://valine.js.org/">comments powered by Valine.</a></noscript>

    
</article>

        

            </section>

        

                
            

<section id="kratos-widget-area" class="col-md-4 hidden-xs hidden-sm">
    <!-- 文章和页面根据splitter来分割，没有的话就从头开始设置为sticky -->
    
    
                <aside id="krw-about" class="widget widget-kratos-about clearfix">
    <div class="photo-background"></div>
    <div class="photo-wrapper clearfix">
        <div class="photo-wrapper-tip text-center">
            <img class="about-photo" src="/blog/images/avaths.webp" loading="lazy" decoding="auto" />
        </div>
    </div>
    <div class="textwidget">
        <p class="text-center"></p>
    </div>
    <div class="site-meta">
        <a class="meta-item" href="/blog/archives/">
            <span class="title">
                文章
            </span>
            <span class="count">
                6
            </span>
        </a>
        <a class="meta-item" href="/blog/categories/">
            <span class="title">
                分类
            </span>
            <span class="count">
                4
            </span>
        </a>
        <a class="meta-item" href="/blog/tags/">
            <span class="title">
                标签
            </span>
            <span class="count">
                6
            </span>
        </a>
    </div>
</aside>
            
                    <div class="sticky-area">
                
                    <aside id="krw-toc" class="widget widget-kratos-toc clearfix toc-div-class" >
    <div class="photo-background"></div>
    <h4 class="widget-title no-after">
        <i class="fa fa-compass"></i>
        文章目录
        <span class="toc-progress-bar" role="progressbar" aria-label="阅读进度："></span>
    </h4>
    <div class="textwidget">
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E6%B8%B2%E6%9F%93-render"><span class="toc-text">什么是渲染(render)?</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E6%98%AF%E5%A6%82%E4%BD%95%E6%B8%B2%E6%9F%93%E9%A1%B5%E9%9D%A2%E7%9A%84%EF%BC%9F"><span class="toc-text">浏览器是如何渲染页面的？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFreflow%EF%BC%9F"><span class="toc-text">什么是reflow？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFrepaint%EF%BC%9F"><span class="toc-text">什么是repaint？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BA%E4%BB%80%E4%B9%88transform%E7%9A%84%E6%95%88%E7%8E%87%E9%AB%98%EF%BC%9F"><span class="toc-text">为什么transform的效率高？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%BE%E7%A4%BA"><span class="toc-text">图示</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%B2%E6%9F%93%E6%97%B6%E9%97%B4%E7%82%B9"><span class="toc-text">渲染时间点 </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B8%B2%E6%9F%93%E6%B5%81%E6%B0%B4%E7%BA%BF"><span class="toc-text">渲染流水线 </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#1-%E8%A7%A3%E6%9E%90HTML-Parse-HTML"><span class="toc-text">1. 解析HTML - Parse HTML </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#2-%E6%A0%B7%E5%BC%8F%E8%AE%A1%E7%AE%97-Recalculate-Style"><span class="toc-text">2. 样式计算-Recalculate Style </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#3-%E5%B8%83%E5%B1%80-Layout"><span class="toc-text">3. 布局 - Layout </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#4-%E5%88%86%E5%B1%82-Layer"><span class="toc-text">4. 分层-Layer </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#5-%E7%BB%98%E5%88%B6-Paint"><span class="toc-text">5. 绘制 - Paint </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#6-%E5%88%86%E5%9D%97-Tiling"><span class="toc-text">6. 分块 - Tiling </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#7-%E5%85%89%E6%A0%85%E5%8C%96-Raster"><span class="toc-text">7.  光栅化 - Raster </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#8-%E7%94%BB-Draw"><span class="toc-text">8.  画 - Draw </span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%8C%E6%95%B4%E8%BF%87%E7%A8%8B"><span class="toc-text">完整过程 </span></a></li></ol></li></ol>
    </div>
</aside>
                
                
  <aside id="krw-categories" class="widget widget-kratos-categories clearfix">
    <h4 class="widget-title"><i class="fa fa-folder"></i>分类目录</h4>
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/blog/categories/HTTP/">HTTP</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/Hello/">Hello</a><span class="category-list-count">1</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/html/">html</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/blog/categories/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/">浏览器原理</a><span class="category-list-count">2</span></li></ul>
  </aside>


            
                
  <aside id="krw-tags" class="widget widget-kratos-tags clearfix">
    <h4 class="widget-title"><i class="fa fa-tags"></i>标签聚合</h4>
      <div class="tag-clouds">
        <a href="/blog/tags/Chrome/" style="font-size: 0.7em;">Chrome</a> <a href="/blog/tags/HTTP/" style="font-size: 0.6em;">HTTP</a> <a href="/blog/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 0.7em;">前端</a> <a href="/blog/tags/%E5%8D%8F%E8%AE%AE/" style="font-size: 0.6em;">协议</a> <a href="/blog/tags/%E5%8E%9F%E7%90%86/" style="font-size: 0.7em;">原理</a> <a href="/blog/tags/%E5%9F%BA%E7%A1%80/" style="font-size: 0.8em;">基础</a>
      </div>
  </aside>

            
                
  <aside id="krw-posts" class="widget widget-kratos-posts">
  <h4 class="widget-title"><i class="fa fa-file"></i>最新文章</h4>
  <div class="tab-content">
      <ul class="list-group">
        
        
          
          
            <a class="list-group-item" href="/blog/2023/11/03/HTTP/HTTP%E5%9F%BA%E7%A1%80/"><i class="fa  fa-book"></i> HTTP基础</a>
            
          
        
          
          
            <a class="list-group-item" href="/blog/2023/10/31/HTML/%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B%E5%A3%B0%E6%98%8E%E6%A0%87%E7%AD%BE/"><i class="fa  fa-book"></i> 文档类型声明标签</a>
            
          
        
          
          
            <a class="list-group-item" href="/blog/2023/10/31/HTML/html%E5%9F%BA%E7%A1%80/"><i class="fa  fa-book"></i> html基础</a>
            
          
        
          
          
            <a class="list-group-item" href="/blog/2023/10/29/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/%E6%B5%8F%E8%A7%88%E5%99%A8%E6%B8%B2%E6%9F%93%E5%8E%9F%E7%90%86/"><i class="fa  fa-book"></i> 浏览器渲染原理</a>
            
          
        
          
          
            <a class="list-group-item" href="/blog/2023/10/29/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%8E%9F%E7%90%86/%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF/"><i class="fa  fa-book"></i> 事件循环</a>
            
          
        
          
            
      </ul>
  </div>
  </aside>

            
    </div>
</section>
        
        </div>
    </div>
</div>
<footer>
    <div id="footer"  class="ap-lrc"  >
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-md-offset-3 footer-list text-center">
                    <ul class="kratos-social-icons">
                        <!-- Keep for compatibility -->
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        <!-- New links -->
                        
                    </ul>
                    <ul class="kratos-copyright">
                        <div>
                            <li>&copy; 2023 月蝉の小窝 版权所有.</li>
                            <li>本站已运行<span id="span_dt">Loading...</span></li>
                        </div>
                        <div>
                            <li>Theme <a href="https://github.com/Candinya/Kratos-Rebirth" target="_blank">Kratos:Rebirth</a></li>
                            <li>Site built with&nbsp;<i class="fa fa-heart throb" style="color:#d43f57"></i>&nbsp;by 月蝉.</li>
                        </div>
                        <div>
                            <li>Powered by <a href="https://hexo.io" target="_blank" rel="nofollow">Hexo</a></li>
                            <li>Hosted on <a href="https://github.io" target="_blank">Github Pages</a></li>
                        </div>
                        <div>
                            
                            
                        </div>
                    </ul>
                </div>
            </div>
        </div>
        <div class="kr-tool text-center">
            <div class="tool">
                
                    <div class="box search-box">
                        <a href="/blog/search/">
                            <span class="fa fa-search"></span>
                        </a>
                    </div>
                
                
                    <div class="box theme-box" id="darkmode-switch">
                        <span class="fa fa-adjust"></span>
                    </div>
                
                
                    <div class="box theme-box" id="snow-switch">
                        <span class="fa fa-snowflake-o"></span>
                    </div>
                
                
            </div>
            <div class="box gotop-box">
                <span class="fa fa-chevron-up"></span>
            </div>
        </div>
    </div>
</footer>
</div>
</div>

        <script defer src="/blog/vendors/bootstrap@3.3.4/dist/js/bootstrap.min.js"></script>
<script defer src="/blog/vendors/nprogress@0.2.0/nprogress.js"></script>
<script>
    if (!window.kr) {
        window.kr = {};
    }
    window.kr.notMobile = (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)));
    window.kr.siteRoot = "/blog/";
</script>

    <div>
        <canvas id="snow"></canvas>
        <script async src="/blog/js/snow.min.js"></script>
    </div>


    <script async src="/blog/js/candy.min.js"></script>



    <script defer src="/blog/vendors/aplayer@1.10.1/dist/APlayer.min.js"></script>
    
    <script defer src="/blog/vendors/meting@2.0.1/dist/Meting.min.js"></script>
    <meting-js
        server="netease"
        type="playlist"
        id="3204190542"
        order="random"
        fixed="true"
    >
    </meting-js>



    <script defer src="/blog/vendors/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script defer src="/blog/js/kratosr.min.js"></script>
<script defer src="/blog/js/pjax.min.js"></script>



<!-- Extra support for third-party plguins  -->


    </body>
</html>